<template>
  <div>
    <van-icon name="arrow-left" @click="setDate('-')" />
    <input
    class="input"
      readonly
      type="text"
      style="width: 80px; height: 20px; text-align: center;"
      :value="getDate"
    />
    <van-icon name="arrow" @click="setDate('+')" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      newDate: new Date()
    };
  },
  computed: {
    getDate() {
      return (
        this.newDate.getFullYear() +
        "年" +
        this.zeroFn(this.newDate.getMonth() + 1)
      );
    }
  },
  methods: {
    zeroFn(val) {
      return val < 10 ? "0" + val : val;
    },
    setDate(str) {
      if (str == "+") {
        this.newDate.setMonth(this.newDate.getMonth() + 1);
      } else {
        this.newDate.setMonth(this.newDate.getMonth() - 1);
      }
      this.newDate = new Date(this.newDate);
      this.$emit("change", this.newDate);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.input{
      margin-left: 9px;
    margin-right: 11px;
    margin-top: 4px;
}
</style>
